<template>
  <div
    class="select-curency over-bg radius flex js-st align-center mb-30"
    @click="select"
    v-clickout="hideselect"
  >
    <div class="up-box radius flex align-center js-ct">
      <img
        v-if="!state.isselect"
        src="@/assets/theme1/header/down.png"
        alt=""
      />
      <img v-else src="@/assets/theme1/header/up.png" alt="" />
    </div>
    <div class="">
      <span class="textperson-t2 text-20 text-bold mr-10">{{
        state.choiced.code
      }}</span>
      <!-- <span class="textperson-t3 text-12">bitcoin</span> -->
    </div>
    <div class="curency-box person-bg point" v-if="state.isselect">
      <!-- <div @click.stop="">
        <el-input
          :placeholder="$t('formTip.search')"
          prefix-icon="el-icon-search"
          v-model="state.param.code"
        >
          <template #append>
            <span class="personlink text-14" @click="getcurrencyList">{{
              $t("exchange.comfirm")
            }}</span>
          </template>
        </el-input>
      </div> -->
      <div
        class="curency-singel textperson-t2 text-14 text-left"
        @click.stop="choice(item)"
        v-for="item in state.currencyList"
        :key="item.code"
      >
        {{ item.code?item.code:item.currency.code}}
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import { currencyList } from "@/api/currency";
import { drawCurrencyList } from "@/api/user";
import { getWithdrawInfo } from "@/api/assets";

export default {
  name: "SelectCurency",
  emits: ["chainlist", "getCurrency", "getCurrencyval", "getMinimum"],
  props: {
    listparam: Object,
    currencyId: Number,
    type: String,
  },
  setup(props, { emit }) {
    const state = reactive({
      isselect: false,
      param: props.listparam,
      currencyList: [],
      choiced: {}, //选中的交易对
    });
    onMounted(() => {
      getcurrencyList();
    });
    const getcurrencyList = () => {
      if(props.type=='cash'){

        let chainlist = [];
        let draw_list=[];
        let curencyid = "";
      drawCurrencyList({account_type_id:1}).then(res=>{
        console.log(res,'提币地址')
        res.data[0].accounts.forEach(e => {
           if(e.currency.open_draw==1){
             draw_list.push(e)
           }
        });
        state.currencyList = draw_list;

      console.log(state.currencyList,'货币列表---')

      
        if (props.currencyId) {
          console.log('_----',draw_list)
          draw_list.forEach((item) => {
            if (item.currency_id === props.currencyId) {
              console.log('找到了吗----',item.currency_id)
              console.log('找到了吗----id:',item.id)

              getWithdrawInfo({id:item.id,account_type_id:1}).then((res2) => {
                console.log('rs..........',res2)
                state.choiced = res2.data.currency;
                emit("getCurrency", res2.data.currency.code);
                emit("getCurrencyval", res2.data.currency);
                // console.log(item.currency.currency_protocols,'item.currency.currency_protocols')
                chainlist = res2.data.currency.currency_protocols;
                curencyid = res2.data.currency_id;
                console.log(chainlist,'chainlist')
                emit("chainlist", chainlist,item.id);
                // state.currencyList = res2.data.currency;

                //   console.log(state.currencyList,'货币列表111---')

              })
           
            }
          });
        } else {
          getWithdrawInfo({id:draw_list[0].id,account_type_id:1}).then((res2) => {
              console.log(res2,'res22222')
              state.choiced = res2.data.currency;
            emit("getCurrency", res2.data.currency.code);
            emit("getCurrencyval",res2.data.currency);
            // emit("getMinimum", draw_list[0].currency_recharge_minimum);
            chainlist = res2.data.currency.currency_protocols;
            curencyid =res2.data.currency_id;
            console.log(chainlist,'chainlist')
            emit("chainlist", chainlist, draw_list[0].id);
              // state.currencyList = res2.data.currency;

              // console.log(state.currencyList,'货币列表2222---')

          })
        
        
        }
      

      })

      }else{
        currencyList(state.param).then((res) => {
        let chainlist = [];
        let curencyid = "";
        console.log(props.currencyId,'currencyId')
        if (props.currencyId) {
          res.data.forEach((item) => {
            if (item.id === props.currencyId) {
              state.choiced = item;
              emit("getCurrency", item.code);
              emit("getCurrencyval", item);
              console.log(res.data,'chainlist')
              chainlist = res.data;
              curencyid = item.id;
            }
          });
        } else {
        
          state.choiced = res.data[0];
          emit("getCurrency", res.data[0].code);
          emit("getCurrencyval", res.data[0]);
          emit("getMinimum", res.data[0].currency_recharge_minimum);
          chainlist = res.data;
          curencyid = res.data[0].id;
          console.log(chainlist,'chainlist')
        }
        emit("chainlist", chainlist, curencyid);
        console.log(res.data,'res.datares.datares.data')
        state.currencyList = res.data;
        
      console.log(state.currencyList,'选择货币？')
      });

      }
    
    };
    const choice = (val) => {
      console.log(val,'选择的想')
      console.log(props.type,'当前是提现的---------------------------')
      if(props.type=='cash'){
        let chainlist = [];
        let curencyid = '';
        getWithdrawInfo({id:val.id,account_type_id:1}).then((res2) => {
                console.log('rs..........',res2)
                state.choiced = res2.data.currency;
                emit("getCurrency", res2.data.currency.code);
                emit("getCurrencyval", res2.data.currency);
                // console.log(item.currency.currency_protocols,'item.currency.currency_protocols')
                chainlist = res2.data.currency.currency_protocols;
                curencyid = res2.data.currency_id;
                console.log(chainlist,'chainlist')
                state.isselect = false;
                emit("chainlist", chainlist,val.id);
                // state.currencyList = res2.data.currency;

                //   console.log(state.currencyList,'货币列表111---')

              })
        // state.choiced = val.currency;
        // emit("getCurrency", val.currency.code);
        // emit("getCurrencyval", val.currency);
        // emit("getMinimum", val.currency);
      
        // emit("chainlist", val.currency.currency_protocols, val.id);
      }else{
        state.choiced = val;
      emit("getCurrency", val.code);
      emit("getCurrencyval", val);
      emit("getMinimum", val);
      state.isselect = false;
      emit("chainlist", val, val.id);
      }
     
    };
    const select = () => {
      state.isselect = !state.isselect;
    };
    const hideselect = () => {
      state.isselect = false;
    };
    return {
      state,
      hideselect,
      select,
      getcurrencyList,
      choice,
    };
  },
};
</script>

<style scoped lang="less">
.select-curency {
  width: 100%;
  height: 59px;
  padding-inline-start: 18px;
  box-sizing: border-box;
  position: relative;
  img {
    width: 20px;
    height: 11px;
  }
}
.mr-10 {
  margin-inline-end: 10px;
}
.mb-30 {
  margin-bottom: 30px;
}
.up-box {
  width: 30px;
  height: 30px;
  background: #eaecef;
  margin-inline-end: 10px;
}
.curency-box {
  position: absolute;
  width: 206px;
  height: 169px;
  left: 0;
  bottom: -169px;
  border-radius: 8px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
  padding: 6px 10px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.is-rtl {
  .curency-box {
    left: auto;
    right: 0;
  }
}
.curency-box /deep/ .el-input__inner {
  border: none;
  background: #f8f8f8;
  .el-input-group__append {
    border: none;
  }
}
.curency-box /deep/ .el-input-group__append {
  border: none;
  background: #f8f8f8;
}
.curency-singel {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding-inline-start: 10px;
  box-sizing: border-box;
}
.curency-singel :hover {
  background: red;
}
</style>
